<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tomcat 测试页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义颜色
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F87171',
                        secondary: '#60A5FA',
                        neutral: '#F3F4F6',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <header class="bg-gradient-to-r from-primary to-secondary text-white shadow-lg">
        <div class="container mx-auto px-4 py-8">
            <h1 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-shadow">
                <i class="fa fa-server mr-3"></i>Tomcat 服务器测试
            </h1>
            <p class="text-lg mt-2 opacity-90">服务器运行正常</p>
        </div>
    </header>

    <main class="container mx-auto px-4 py-10">
        <div class="grid md:grid-cols-2 gap-8">
            <!-- 服务器信息卡片 -->
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <h2 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                    <i class="fa fa-info-circle text-secondary mr-2"></i>服务器信息
                </h2>
                <div class="space-y-3 text-gray-700">
                    <p><span class="font-medium">服务器时间：</span><span id="serverTime"></span></p>
                    <p><span class="font-medium">浏览器信息：</span><span id="browserInfo"></span></p>
                    <p><span class="font-medium">页面路径：</span><%= request.getRequestURI() %></p>
                    <p><span class="font-medium">上下文路径：</span><%= request.getContextPath() %></p>
                    <p><span class="font-medium">服务器名称：</span><%= request.getServerName() %></p>
                    <p><span class="font-medium">服务器端口：</span><%= request.getServerPort() %></p>
                </div>
            </div>

            <!-- 测试功能卡片 -->
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <h2 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                    <i class="fa fa-check-square-o text-secondary mr-2"></i>功能测试
                </h2>
                <div class="space-y-6">
                    <div>
                        <button id="testButton" class="bg-secondary hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
                            <i class="fa fa-refresh mr-2"></i>点击测试交互
                        </button>
                        <div id="testResult" class="mt-3 p-3 rounded-lg hidden"></div>
                    </div>

                    <div class="pt-4 border-t border-gray-100">
                        <h3 class="font-medium text-gray-700 mb-2">Tomcat 状态</h3>
                        <div class="flex items-center">
                            <span class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                            <span class="text-green-600 font-medium">运行正常</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 说明信息 -->
        <div class="mt-10 bg-neutral rounded-xl p-6">
            <h3 class="text-xl font-semibold text-gray-800 mb-3">
                <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>测试说明
            </h3>
            <ul class="list-disc pl-5 space-y-2 text-gray-700">
                <li>此页面用于验证 Tomcat 服务器是否正常运行</li>
                <li>页面包含 JSP 脚本，可以显示服务器相关信息</li>
                <li>点击"点击测试交互"按钮可验证 JavaScript 功能</li>
                <li>若能正常显示此页面，说明 Tomcat 部署成功</li>
            </ul>
        </div>
    </main>

    <footer class="bg-gray-800 text-white py-6 mt-10">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; <%= new java.util.Date().getYear() + 1900 %> Tomcat 测试页面</p>
            <p class="mt-1 text-gray-400 text-sm">使用 HTML, JSP 和 Tailwind CSS 构建</p>
        </div>
    </footer>

    <script>
        // 显示当前时间
        function updateServerTime() {
            const now = new Date();
            document.getElementById('serverTime').textContent = now.toLocaleString();
        }
        updateServerTime();
        setInterval(updateServerTime, 1000);

        // 显示浏览器信息
        document.getElementById('browserInfo').textContent = navigator.userAgent;

        // 测试按钮交互
        document.getElementById('testButton').addEventListener('click', function() {
            const resultDiv = document.getElementById('testResult');
            resultDiv.textContent = `交互测试成功！时间：${new Date().toLocaleTimeString()}`;
            resultDiv.className = 'mt-3 p-3 rounded-lg bg-green-50 text-green-700 border border-green-200';
            
            // 3秒后隐藏结果
            setTimeout(() => {
                resultDiv.className = 'mt-3 p-3 rounded-lg hidden';
            }, 3000);
        });
    </script>
</body>
</html>
